<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const p1 = Promise.resolve().then(() => {
            return 100;
        })
        console.log(p1); // [[PromiseStatus]]: "resolved" [[PromiseValue]]: 100
        // 在这里直接输出会输出状态为pending，因为这是当时的结果，这里有异步，浏览器帮我们计算完最终结果为resolved

        p1.then(() => {
            console.log(123); // 123
        }) // resolved会触发后续 then的回调


        const p2 = Promise.resolve().then(() => {
            throw new Error('then')
        })
        console.log(p2); // rejected

        p2.then(() => {
            console.log(456); // 不输出
        } // rejected不会触发后续 then的回调
        ).catch(err => {
            console.error('err100', err)
        }) // rejected会触发后续 catch的回调

        const p3 = Promise.reject('my err').catch(err => {
            console.error(err)
        }) // rejected
        console.log(p3); // resolved 注意！

        p3.then(() => {
            console.log(100); // 100
        }) // 可以触发

        const p4 = Promise.reject('my error').catch(err => {
            throw new Error('catch err')
        })
        console.log(p4); // rejected

        p4.then(() => {
            console.log(200); // 触发不了
        }).catch(() => {
            console.log('p4 error'); // p4 error
        })
    </script>
</body>

</html>